<template>
	<view class="forget-pass">
		<navbar ref="navbar" :config="config" backColor="#000000"></navbar>
		<form @submit="formSubmit">
			<view class="contFrom">
			<view class="phone">
				<input type="number" v-model="phone" name="phone" value=""
					placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" @input="onPhone"
					maxlength="11" placeholder="请输入手机号" />
			</view>
			<view class="phone codeView">
				<input type="text" name="code" v-model="code" value="" maxlength="6" @input="onCode" placeholder="请输入您的验证码"
					placeholder-style="color:#AAAAAA; font-size:28rpx; font-weight:500;" />
				<button class="verification-right" :disabled="disabled" @click="judgeRegister"
					:class="isPhone?'active':''">
					{{verificationCode}}
				</button>
			</view>
			<view class="phone">
				<input type="text" password="true" v-model="newPass" name="newPass" value="" maxlength="11" @input="onNewPass"
					placeholder="请输入您的新密码" placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" />
			</view>
			<view class="phone">
				<input type="text" password="true" v-model="confirmPass" name="confirmPass" maxlength="11" @input="onConfirmPass" value=""
					placeholder="确认密码" placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" />
			</view>
				<button class="button" form-type="submit"
				:disabled="!phone||!code||!newPass||!confirmPass"
				>确认提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getVerfityCode,
		forgetPass
	} from "@/api/login.js"
	export default {
		data() {
			return {
				config: {
					title: '忘记密码',
					backgroundColor: [1, "#fff"],
					back: true, //false是tolbar页面 是则不写
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
				},
				phone: "", //手机号
				isPhone: false, //手机号正则
				code: "", //验证码
				newPass: "", //新密码
				confirmPass: "", //确认密码
				disabled: false,
				time: 60,
				verificationCode: "发送验证码",
				
				

			}
		},
		methods: {
			//获取验证码

			async obtainCode() {
				if (this.isPhone) {
					let res = await this.$http.post(getVerfityCode, this.phone)
					if (res && res.code == 200) {
						this.$mUtil.toast("发送成功")
						this.disabled = false;
						this.isPhone = false;
						this.verificationCode = this.time + "s";
						this.clear = setInterval(this.countDown, 1000);
					}
				}
			},
			judgeRegister() {
				this.$http.get('/account/verify-mobile/' + this.phone).then(res => {
					if (res && res.code == 200) {
						console.log(res.data)
						if (res.data == false) {
							this.$mUtil.toast("该手机号还未注册")
						} else if (res.data == true) {
							this.obtainCode()
						}
					}
				})





			},
			countDown() {
				if (this.time <= 0) {
					this.disabled = false;
					this.verificationCode = "重新获取";
					this.isPhone = true;
					this.time = 60;
					clearInterval(this.clear)
				} else {
					--this.time;
					this.verificationCode = this.time + 's'
				}
			},
			//清楚计时器
			beforeDestroy() {
				clearInterval(this.clear)
			},

			//手机号
			onPhone(e) {
				this.phone = e.detail.value
				if (this.phone.match(this.$mConfig.telRegex)) {
					if (this.verificationCode == '发送验证码' || this.verificationCode == '重新获取') {
						this.isPhone = true
					}
				} else {
					this.isPhone = false
				}
			},
			//验证码
			onCode(e) {
				this.code = e.detail.value
			},
			//新密码
			onNewPass(e) {
				this.newPass = e.detail.value
			},
			//确认密码
			onConfirmPass(e) {
				this.confirmPass = e.detail.value
			},
			//提交信息
			formSubmit(e) {
				
				let target = e.detail.value;
				if (!target.phone) {
					this.$mUtil.toast("请输入手机号")
					return false
				}
				if (!(target.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				if (!target.code) {
					this.$mUtil.toast("请输入验证码")
					return false
				}
				if (!target.newPass) {
					this.$mUtil.toast("请输入新密码")
					return false
				}
				if (!target.confirmPass) {
					this.$mUtil.toast("请输入确认密码")
					return false
				}
				if (!(target.newPass.match(target.confirmPass))) {
					this.$mUtil.toast("两次密码不一致")
					return false
				}
				let param = {
					mobile: target.phone,
					new_password: target.newPass,
					captcha: target.code
				}
				this.$http.post(forgetPass, param)
					.then(res => {
						if (res.code == 200) {
							this.$mUtil.toast("修改成功")
							setTimeout(() => {
								this.$http.post("/account/logout").then(res => {
									if (res && res.code == 200) {

										uni.clearStorageSync()
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}, 2000)

							this.$mUtil.toast("修改成功")
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
	
	/deep/ .uni-input-input {
		color: #AAAAAA;
	}
	.button {
		width: 635rpx;
		height: 96rpx;
		background: #FF211F;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 335rpx;
	}

	.phone {
		
		width: 635rpx;
		height: 96rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top:38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 38rpx;
		box-sizing: border-box;
		
	}

	.verification-code {
		margin: 0 65rpx;
		display: flex;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.verification-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #474747;
		}

		input {
			flex: 1;
			margin-left: 88rpx;
		}

		

		.active {
			background-color: #FF721B;
			color: #FFFFFF;
      border: none;
		}
	}

	.background {
		height: 10rpx;
		background-color: #F5F5F5;
	}

	.new-pass {
		margin: 0 65rpx;
		display: flex;
		align-items: center;
		padding: 23rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.new-pass-item {
			font-size: 28rpx;
			color: #474747;
			font-weight: 400;
		}

		input {
			flex: 1;
			margin-left: 88rpx;
		}
	}

	.confirm-pass {
		margin: 0 65rpx;
		display: flex;
		padding: 34rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.confirm-pass-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #474747;
		}

		input {
			flex: 1;
			margin-left: 60rpx;
		}
	}
	.contFrom{
		margin: 0 57rpx;
	}
	.verification-right {
		width: auto;
		height: 65rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #FF211F;
		font-weight: 400;
		font-size: 23rpx;
		color: #FF211F;
		line-height: 23rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 19rpx;
	}
	.codeView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 15rpx;
	}
</style>
